<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security" >
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{/assets/js/jscolor.js}"> </script>
    <title>富文本框</title>
    <script th:inline="javascript">

        $(function () {
            //增加图片
            $("#add-pic-btn-id").click(function () {
                var filePath = $("#pic-addr-id").val();
                editer.focus();
                document.execCommand('InsertImage', false, filePath);
            });
            //设置链接
            $("#add-link-btn-id").click(function () {
                var link = $("#link-addr-id").val();
                // setLink(link);
                document.execCommand('CreateLink',false,link);
            });
            //加粗
            $("#add-bold-btn-id").click(function () {
                document.execCommand('bold', false, null);
            });
            //斜体
            $("#add-italic-btn-id").click(function () {
                document.execCommand('Italic', false, null);
            });
            //字体
            $("#set-font-size-btn-id").click(function () {
                var val = $("#font-size-input-id").val();
                document.execCommand('FontSize', false, val);
            });
            //编辑
            $("#edit-btn-id").click(function () {

                $("#editer").attr("contentEditable","true");
                $("#edit-btn-id").css("display","none");
                $("#confirm-btn-id").css("display","inline-block");
            });
            //确认
            $("#confirm-btn-id").click(function () {
                $("#editer").attr("contentEditable","false");
                $("#edit-btn-id").css("display","inline-block");
                $("#confirm-btn-id").css("display","none");
            });
            //请空
            $("#clean-btn-id").click(function () {
                $("#editer").html("");
            });
            //字体颜色
            $("#color-btn-id").click(function () {
                var colorVl = $("#color-input-id").val();
                document.execCommand('ForeColor', false, colorVl);
            });
            //字体背景
            $("#back-btn-id").click(function () {
                var colorVl = $("#color-input-id").val();
                document.execCommand('BackColor', false, colorVl);
            });
            // 全屏
            $("#fullscreen-btn-id").click(function () {
                var editContain = $(".edit-contain");
                var fullscreen = $(".fullscreen");
                if(fullscreen.length > 0){
                    editContain.removeClass("fullscreen");
                    $(".group-column").removeClass("group-row");

                }else {
                    editContain.addClass("fullscreen")
                    $(".group-column").addClass("group-row");
                }
            });
            //清空
            $("#erase-btn-id").click(function () {
                document.execCommand('RemoveFormat');
            });
            //下划线
            $("#underline-btn-id").click(function () {
                document.execCommand('underline');
            });
            //缩进
            $("#indent-btn-id").click(function () {
                document.execCommand('indent');
            });
            //取消缩进
            $("#outdent-btn-id").click(function () {
                document.execCommand('outdent');
            });



        });//ready


    </script>
    <style>
        [contenteditable="false"] {
            background-color: white;
        }

        [contenteditable="true"] {
            background-color: gainsboro;
            overflow: auto;
            border: 1px solid #AAAAAA;
        }

        [contenteditable="true"]:focus {
            background-color: ghostwhite;
            overflow: auto;
            border: 1px solid #AAAAAA;
        }
        .edit-contain{
            display: flex;
            flex-direction: column;
            height: 400px;
            width: 450px;
        }

        .edit-contain.fullscreen{
            height:100% !important;
            width: 100% !important;
        }
        .group-row{
            display: flex;
            flex-direction: row !important;
        }
        .group-column{
            flex-basis: 32px;
            display: flex;
            flex-direction: column;

        }
        .group-row > div{
            /*border-left: 1px solid #CCCCCC;*/
            border-right: 1px solid #CCCCCC;
            margin: 0 5px;
            border-spacing: 5px;
        }


    </style>
</head>
<body style="margin: 30px;">
<div class="edit-contain">
    <nav class="group-column">
        <section class="group-row">

            <div>
                <!--图片-->
                <input id="pic-addr-id" type="hidden" placeholder="请输入图片地址"
                       value="https://img.alicdn.com/imgextra/i3/O1CN01yV11h41EqA0UoZy0Z_!!6000000000402-2-tps-128-128.png">
                <a id="add-pic-btn-id" class="btn" title="图片"><i class="glyphicon glyphicon-picture"></i></a>
                <input id="link-addr-id" type="hidden" placeholder="请输入超链接地址"
                       value="https://img.alicdn.com/imgextra/i3/O1CN01yV11h41EqA0UoZy0Z_!!6000000000402-2-tps-128-128.png">
                <!--链接-->
                <a id="add-link-btn-id" class="btn" title="链接"><i class="glyphicon glyphicon-link"></i></a>
                <!--加粗-->
                <a id="add-bold-btn-id" class="btn" title="加粗"><i class="glyphicon glyphicon-bold"></i></a>
                <!--斜体-->
                <a id="add-italic-btn-id" class="btn" title="斜体"><i class="glyphicon glyphicon-italic"></i></a>
                <a id="underline-btn-id" class="btn" title="下划线"><i class="glyphicon glyphicon-text-width"></i></a>
                <a id="erase-btn-id" class="btn" title="清空格式"><i class="glyphicon glyphicon-erase"></i></a>
            </div>

            <div>
                <!--字体-->
                <input id="font-size-input-id" type="number" style="width: 40px;"  value="1" max="7" min="1">
                <a id="set-font-size-btn-id" class="btn" title="字体"><i class="glyphicon glyphicon-text-size"></i></a>
            </div>

        </section>
        <section class="group-row">
            <div>
                <a id="outdent-btn-id" class="btn" title="取消缩进"><i class="glyphicon glyphicon-menu-left"></i></a>
                <a id="indent-btn-id" class="btn" title="缩进"><i class="glyphicon glyphicon-menu-right"></i></a>
            </div>
            <div>
                <input id="color-input-id" value="#3399FFFF" data-jscolor="{}" style="width: 45px;">
                <a id="color-btn-id" class="btn" title="颜色"><i class="glyphicon glyphicon-text-color"></i></a>
                <a id="back-btn-id" class="btn" title="颜色"><i class="glyphicon glyphicon-text-background"></i></a>
            </div>
            <div>
                <a id="edit-btn-id" class="btn" title="编辑" style="display: none;"><i class="glyphicon glyphicon-pencil"></i></a>
                <a id="confirm-btn-id" class="btn" title="确认"><i class="glyphicon glyphicon-ok"></i></a>
                <a id="clean-btn-id" class="btn" title="清空内容"><i class="glyphicon glyphicon-remove"></i></a>
                <a id="fullscreen-btn-id" class="btn" title="全屏"><i class="glyphicon glyphicon-fullscreen"></i></a>
            </div>
        </section>

    </nav>
    <div id="editer"  contentEditable ="true"  style="flex-grow: 1">

    </div>
    <div style="flex-basis: 10px"></div>
</div>




</body>
</html>